<template>
	<view class="searchBox">
		<view class="u-demo-block">
			<view class="u-demo-block__content">
				<view class="u-page__tag-item">
					<u-search :showAction="false" actionText="搜索" :animation="false" v-model="keyword"></u-search>
				</view>
			</view>
			<view class="searchButon">
				<button @click="searchData()" type="default">搜索</button>
			</view>
		</view>
		<view class="listNav">
			<text>综合</text>
			<text>
				销量
				<view class="salesImg">
					<!-- <image src="../../../../static/sj.png" mode=""></image> -->
				</view>
			</text>
			<text>价格</text>
		</view>
		<view class="listData">
			<view class="listBox" v-for="(item,index) in listData" :key="index" @click="cellClick(item.id)">
				<view class="listImg">
					<image :src="item.goods_image" mode=""></image>
				</view>
				<view class="listRight">
					<text class="listTelie">{{item.goods_name}}</text>
					<view style="display: flex;position: relative;">
						<text  class="shopMoney">¥ {{item.goods_price}}</text>
						<!-- <view class="collection">
							
							<image  @click="cllecClick(sousuoId.id)" :src="item.isCollect=='0'?'../../../../static/xing.png':'../../../../static/img/shouchang/xuanzhong_shouchang.png'"  mode=""></image>
							
						</view> -->
		<!-- 				<view class="collection">
							<image @click="quxiaoClick()" src="../../../../static/img/tabbar/selectedTabbar3.png" mode=""></image>
						</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showdiv: '',
				keyword:'',// 搜索
				listData: [],// list数据
				sort_price: 'desc',// 价格参数
				sousuoId: [],
				page:1,
				urlId:"",
			}
		},
		onLoad(options) {
			this.urlId = options.id;
			this.getData(this.urlId)
		},
		//下拉刷新
		onPullDownRefresh() {
			this.page=1;			
			this.getData(this.urlId);
			setTimeout(function () {
			    uni.stopPullDownRefresh();
			}, 1000);
		},
		// 上拉加载
		onReachBottom() {
			this.page+=1
			this.getData(this.urlId)
		},
		methods: {
			getData(urlId) {
				uni.request({
					url: this.baseurl+'/index.php/api/index/goods_list',
					method:'post',
					data:{
						page_num: "10",
						category_id: urlId,
						page:this.page,
					},
					success: (res) => {
						if(res.data.code == "1") {
							if(this.page == 1){
								this.listData = res.data.data.goodsList;
							}else{
								this.listData.concat(res.data.data.goodsList);
							}
							
						}
					}
				})
			},
			cellClick(id){
				uni.navigateTo({
					url:'../commodity-details/index?id='+id
				})
			},
			// price(val) {
			// 	uni.showLoading({
			// 	    title: '加载中'  
			// 	});
			// 	uni.request({
			// 		url: this.baseurl+'/index.php/api/index/goods_list',
			// 		method:'post',
			// 		data:{
			// 			page_num: "10",
			// 			sort_price: val,
			// 		},
			// 		success: (res) => {
			// 			if(res.data.code == "1") {
			// 				this.listData = res.data.data.goodsList;
			// 				uni.hideLoading();
			// 			}
			// 		}
			// 	})
			// },
			searchData() {
				uni.showLoading({
				    title: '加载中'  
				});
				if(this.keyword == '' || this.keyword == null) {
					this.getData()
					uni.hideLoading();
				} else {
					uni.showLoading({
					    title: '加载中'  
					});
					uni.request({
						url: this.baseurl+'/index.php/api/index/goods_list',
						method:'post',
						data:{
							page_num: "10",
							keywords: this.keyword,
						},
						success: (res) => {
							if(res.data.code == "1") {
								this.listData = res.data.data.goodsList;
								uni.hideLoading();
							}
						}
					})
				}
			},
			bianli() {
				for (let i = 0; i < this.listData.length; i++) {
					this.listData[i]
				}
			},
			cllecClick(id) {
				this.showdiv = !this.showdiv
				
			},
		},
		// watch: {
		// 	keyword(value) {
		// 		this.searchData()
		// 	}
		// }
	} 
</script>

<style lang="scss" scoped>
	.searchBox {
		background-color: #F4F4F4;
		padding: 0 32rpx;
		.u-demo-block {
			display: flex;
			padding-top: 22rpx
		}
		.listNav {
			padding-top: 42rpx;
			display: flex;
			text {
				display: block;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
			}
			text:nth-child(1) {
				padding-left: 80rpx;
			}
			text:nth-child(2),
			text:nth-child(3) {
				padding-left: 156rpx;
				.salesImg {
					width: 14rpx;
					height: 8rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.listData {
			padding-top: 22rpx;
			.listBox {
				display: flex;
				padding: 40rpx 0;
				border-top: 4rpx dashed #979797;
				.listImg {
					width: 176rpx;
					height: 176rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.listRight {
					padding-left: 32rpx;
					.listTelie {
						display: block;
						width: 478rpx;
						height: 126rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 40rpx;
						padding-top: 4rpx;
					}
					.shopMoney {
						font-size: 26rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #F25F5F;
						line-height: 50rpx;
					}
					.collection {
						width: 48rpx;
						height: 44rpx;
						position: absolute;
						right: 0;
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
	/deep/.u-search {
		width: 508rpx !important;
	}
	/deep/ .u-search__content {
		background-color: #FFFFFF !important;
		height: 76rpx !important;
		border-radius: 12rpx !important;
	}
	/deep/ .uni-input-wrapper {
		background-color: #fff !important;
	}
	/deep/ .u-search__content__input {
		background-color: #FFFFFF !important;
	}
	.searchButon {
		margin-left: 28rpx;
		button {
			width: 150rpx;
			height: 76rpx;
			line-height: 76rpx;
			font-size: 28rpx;
			color: #FFFFFF !important;
			background-color: #F25F5F;
			border-radius: 12rpx;
		}
	}
</style>
